<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>运动</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            #div1{
                width:100px;
                height:100px;
                background: #f00;
                position:absolute;
                top:100px;
                left:50px;
            }
        </style>
        <script>
            window.onload = function() {
                var oDiv = document.getElementById("div1");
                var oBtn = document.getElementById("btn1");
                var timer = "";
                var speed = 1;
                oBtn.onclick = function() {
                    clearInterval(timer);
                    timer = setInterval(function() {
                        if (oDiv.offsetLeft >= 300) {
                            clearInterval(timer);
                        }
                        else {
                            oDiv.style.left = oDiv.offsetLeft + speed + "px";
                        }
                    }, 30);
                };
            };
        </script>
    </head>
    <body>
        <div>
            <input type="button" id="btn1" value="运动" />
            <div id="div1"></div>
        </div>
    </body>
</html>
